<template>
  <div>
    <el-container width="100%">
      <el-aside width="200px" class="left-nav-container">
        <el-menu
          default-active="1"
          background-color="#cad7e7"
          text-color="black"
          active-text-color="#5FB878"
          class="leftNav"
          :unique-opened="false"
        >
          <el-menu-item index="1-1"
            ><a href="/UserInfo" target="_bank">个人信息</a></el-menu-item
          >
          <el-menu-item index="1-2"
            ><a href="/UpdateAvatar" target="_bank"
              >上传更改头像</a
            ></el-menu-item
          >
          <el-menu-item index="1-3"
            ><a href="/UpdateUserInfo" target="_bank">修改信息</a></el-menu-item
          >

          <el-menu-item index="2-2" v-if="showMenuItem"
            ><a href="/InClubAct" target="_bank">社团活动列表</a></el-menu-item
          >
        </el-menu>
      </el-aside>
      <el-container direction="vertical">
        <v-header />
        <div class="iframe_container">
          <iframe
            src=""
            name="_bank"
            frameborder="0"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
        <v-footer />
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/views/common/Header'
import Footer from '@/views/common/Footer'
export default {
  name: 'Main',
  data() {
    return {
      showMenuItem: false,
    }
  },
  components: {
    'v-header': Header,
    'v-footer': Footer,
  },
  methods: {
    /*1.进入后台前判断学生表的社团ID是否为空
		为空则showMenuItem为false,侧边栏不显示社团信息和社团活动
		不为空且有当前存在的任一社团ID则showMenuItem为true,侧边栏显示社团信息社团活动
		*/
  },
}
</script>

<style scoped="scoped">
/*侧边栏样式*/
.leftNav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: #cad7e7 !important;
  padding-top: 57px;
}
.leftNav .el-menu-item a {
  color: black;
  text-decoration: none;
}
.router-link-exact-active.router-link-active {
  font-size: 120%;
  color: #409eff !important;
}
/*打开窗口的样式*/
.iframe_container {
  width: 100%;

  height: 700px;
  margin-top: 50px;
}
</style>
